<script setup>
import { GetListAPI } from '@/api/system/modeling'
const { proxy } = getCurrentInstance()

/**
 * 传入数据
 */
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: '父级',
  },
})

/**
 * 表单ref
 */
const ruleFormRef = ref(null)

/**
 * 表格数据
 */
const tableData = ref([])

/**
 * 表单字段
 */
const ruleForm = reactive({
  regionName: '', // 设备类型
  regionCode: '', // 编码
})

/**
 * 表单校验
 */
const rules = reactive({
  regionCode: [{ required: true, message: '请填写编码', trigger: 'blur' }],
  regionName: [{ required: true, message: '请填写名称', trigger: 'blur' }],
  parentId: [{ required: true, message: '上级编码', trigger: 'blur' }],
})

/**
 * 提交
 */
const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return proxy.formMsg()

  return ruleForm
}

/**
 * 查询列表
 */
const getList = async () => {
  try {
    const result = await GetListAPI()
    tableData.value = result.data
  } catch (err) {
    console.error(err)
  } finally {
  }
}
getList()

/**
 * 初始化数据
 */
const initDatta = () => {
  Object.keys(props.data).forEach(
    (keyItem) => (ruleForm[keyItem] = props.data[keyItem])
  )
}
initDatta()
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <el-form
      ref="ruleFormRef"
      inline
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      status-icon
    >
      <el-form-item
        v-if="props.type == '2'"
        :label="'上级编码'"
        prop="parentId"
      >
        <!-- 子集 -->
        <el-tree-select
          :data="tableData"
          :props="{
            value: 'id',
            label: 'regionName',
            children: 'children',
          }"
          v-model="ruleForm.parentId"
          :render-after-expand="false"
          check-strictly
        />
      </el-form-item>
      <el-form-item
        :label="'编码'"
        :prop="props.type == '2' ? '' : 'regionCode'"
      >
        <!-- 父级 -->
        <el-input
          :disabled="props.disabled"
          clearable
          v-model="ruleForm.regionCode"
          placeholder="请填写编码"
        />
      </el-form-item>

      <el-form-item label="名称" prop="regionName">
        <el-input
          :disabled="props.disabled"
          clearable
          v-model="ruleForm.regionName"
          placeholder="请填写名称"
        />
      </el-form-item>

      <div class="rk">
        <el-form-item label="备注" prop="remark">
          <el-input
            :disabled="props.disabled"
            :rows="2"
            type="textarea"
            clearable
            v-model="ruleForm.remark"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
.info {
  display: flex;
  .left {
    flex: 2;
  }
  .right {
    flex: 1;
    .imgUpload {
      margin-bottom: 50px;
    }
  }
}
.caozuo {
  display: flex;
  justify-content: space-evenly;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
